
/*
 * @项目名称: 模板开发
 * @FilePath: /meek/src/renderer/render/circlerender.js
 * @Author: kongxueyang@datatang.com
 * @Date: 2020-09-16T15:29:54+08:00
 * @LastEditors: kongxueyang@datatang.com
 * @LastEditTime: 2021-02-03T19:03:50+08:00
 * Copyright (c) 2018-2022
 */

/**
 * Created by zhangyong on 2017/3/20.
 */
import GeometryRender from '../render/geomertyrender'
import LineStyle from '../../style/linestyle'

import { colorToString } from '../../utils/helpers'
import { Transform } from '../../data/matrix/transform'
import PointStyle from "../../style/pointstyle"
import Circle from './../../geometry/circle';
import { drawPoint } from './drawPoint'

export default class CircleRender extends GeometryRender {

  constructor(context) {
    super(context)

    this._pixelCoordinates = []
  }

  render(feature, renderStyle, transform) {
    if (!feature) {
      return
    }
    const ctx = this.context
    const styleArray = renderStyle
    const geomerty = feature.geometry

    const coordinates = [geomerty.x, geomerty.y]
    const coordinates2 = [geomerty.x + geomerty.r, geomerty.y]
    // TODO  Should be cached
    const pixelCoordinates = Transform.transform2D(
      coordinates, 0, coordinates.length, 2,
      transform, this._pixelCoordinates)
    const pixelCoordinates2 = Transform.transform2D(
      coordinates2, 0, coordinates2.length, 2,
      transform, this._pixelCoordinates)
    const x = pixelCoordinates[0]
    const y = pixelCoordinates[1]
    const len = styleArray.length
    for (let i = 0; i < len; i++) {
      let styleObj = styleArray[i]

      let renderOptions = {
        x: x,
        y: y,
        r: geomerty.screenPix ? geomerty.r : Circle.getDistance(pixelCoordinates, pixelCoordinates2),
        sAngle: geomerty.sAngle,
        eAngle: geomerty.eAngle,
        counterclockwise: geomerty.counterclockwise,
        fillStyle: colorToString(styleObj.color, styleObj.alpha),
        borderStyle: styleObj.borderStyle
      }
      this.drawCircle(ctx, renderOptions, feature)
      const { r } = renderOptions;
      drawPoint(ctx, [[[x - r, y], [x + r, y], [x, y - r], [x, y + r]]], feature, styleArray);
      if (styleObj.style === PointStyle.X) {
        this.drawX(ctx, renderOptions);
      }
    }
  }

  drawCircle(ctx, renderOptions, feature) {
    // console.log('类型为圆，开始绘制圆')
    // 开始绘制外层圆
    ctx.save()

    ctx.beginPath()
    ctx.arc(renderOptions.x, renderOptions.y, renderOptions.r, renderOptions.sAngle, renderOptions.eAngle, renderOptions.counterclockwise)

    const borderStyle = renderOptions.borderStyle
    if (borderStyle) {
      ctx.strokeStyle = colorToString(borderStyle.color, borderStyle.alpha)
      ctx.lineWidth = borderStyle.width
      if (borderStyle.style === LineStyle.DASH) {
        ctx.setLineDash([5, 5])
      } else if (borderStyle.style === LineStyle.DASHDOT) {
        ctx.setLineDash([10, 3, 3, 3]);
      }
      ctx.stroke()
    }
    if (renderOptions.fillStyle) {
      ctx.fillStyle = renderOptions.fillStyle
      ctx.fill()
    }
    ctx.closePath()
    ctx.restore()
    if (feature.centralPoint) {
      drawCenterPoint(ctx, [renderOptions.x, renderOptions.y], renderOptions);
      this.drawLine(ctx, renderOptions);
    }
  }

  drawX(ctx, renderOptions) {
    ctx.save()
    ctx.beginPath()
    const dst = renderOptions.r * Math.sqrt(2) / 2;
    ctx.moveTo(renderOptions.x, renderOptions.y)
    ctx.lineTo(renderOptions.x + dst, renderOptions.y - dst);
    ctx.moveTo(renderOptions.x, renderOptions.y)
    ctx.lineTo(renderOptions.x - dst, renderOptions.y - dst);
    ctx.moveTo(renderOptions.x, renderOptions.y)
    ctx.lineTo(renderOptions.x - dst, renderOptions.y + dst);
    ctx.moveTo(renderOptions.x, renderOptions.y)
    ctx.lineTo(renderOptions.x + dst, renderOptions.y + dst);
    const borderStyle = renderOptions.borderStyle
    if (borderStyle) {
      ctx.strokeStyle = colorToString(borderStyle.color, borderStyle.alpha)
      ctx.lineWidth = borderStyle.width;

      if (borderStyle.lineDash) {
        ctx.setLineDash(borderStyle.lineDash)
      }

      ctx.stroke()
    }

    ctx.closePath()
    ctx.restore()
  }

  drawLine(ctx, renderOptions) {
    ctx.save()
    const { x, y, r } = renderOptions;
    const vertexs = [
      [x - r, y],
      [x, y + r],
      [x + r, y],
      [x, y - r],
    ];
    const borderStyle = renderOptions.borderStyle
    if (borderStyle) {
      ctx.strokeStyle = colorToString(borderStyle.color, borderStyle.alpha)
      ctx.lineWidth = borderStyle.width
      ctx.setLineDash([5, 5])
    }
    ctx.beginPath();
    ctx.moveTo(...vertexs[0]);
    ctx.lineTo(...vertexs[2]);
    ctx.moveTo(...vertexs[1]);
    ctx.lineTo(...vertexs[3]);
    ctx.stroke();
    ctx.restore();
  }

}


export const drawCenterPoint = (ctx, point, renderOptions) => {

  ctx.beginPath()
  ctx.save()

  ctx.arc(point[0], point[1], 1, 0, 2 * Math.PI, true)

  // if (renderOptions.fillStyle) {
  //   ctx.fillStyle = renderOptions.fillStyle
  //   ctx.fill()
  // }

  if (renderOptions.borderStyle) {
    ctx.strokeStyle = colorToString(renderOptions.borderStyle.color, renderOptions.borderStyle.alpha)
    ctx.lineWidth = renderOptions.borderStyle.width
    ctx.fillStyle = ctx.strokeStyle
    // if (renderOptions.borderStyle.style === LineStyle.DASH) {
    //   ctx.setLineDash([5, 5])
    // } else if (renderOptions.borderStyle.style === LineStyle.DASHDOT) {
    //   ctx.setLineDash([10, 3, 3, 3]);
    // }
    ctx.fill()
    ctx.stroke()
  }
  ctx.closePath()

  ctx.restore()
}
